<template>
  <!-- 项目简介 -->
  <div class="body projectDescription">
      <div class="titleBox">
        <img src="@/assets/projectDescription.png" alt="" class="titlebg">
        <p class="title">项目简介</p>
      </div>
      <div class="main" @click="$emit('projectDescription',1)">
        <div class="main_content">
          <img src="@/assets/test.jpg" alt="">
          <!-- <p  class="line-clamp3">本项目占地17.6亩，位于山西省长治市屯留区境内，是以潞安化工集团古城煤矿中央风井为依托建设的乏风及抽放瓦斯氧化发电工程。
          发电系统主要由1套乏风瓦斯掺混系统、10台蓄热氧化装置（RTO）、1台100
          ton/h高温高压余热锅炉、1台25 MW抽凝式汽轮发电机组等子系统组成。
          掺混系统将抽放瓦斯和乏风掺混到一定浓度（甲烷浓度1.2%左右）后送入RTO装置，氧化反应产生的高温烟气进入余热锅炉生产蒸汽，蒸汽推动汽轮发电机将热能转化为电能的同时向用户供热，实现热电联产。</p> -->
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'projectDescription',
  data () {
    return {
      msg: 'projectDescription'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
    .projectDescription{
      width: 100%;
      height: 100%;
      color: #fff;
    }
    .body{
      .titleBox{
        width: 100%;
        height: 60px;
        border-bottom: 1px solid #5D96ED;
        position: relative;
        .titlebg{
          height: 60px;
          position: absolute;
        }
        .title{
          position: absolute;
          z-index: 1;
          top: 16px;
          left: 60px;
        }
      }
      .main{
        width: 100%;
        height: calc(100% - 62px);
        padding: 20px;
        box-sizing: border-box;
        .main_content{
          width: 100%;
          height: 100%;
          position: relative;
        }
        img{
          width: 100%;
          height: 100%;
        }
        p{
          padding: 14px;
          box-sizing: border-box;
          background-color: rgba(0,0,0,0.3);
          color: #fff;
          position: absolute;
          bottom: 0;
          font-size: 14px;
        }
        .line-clamp3 {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }
</style>
